<template>
  <div class="w-h-full">
    <div class="input-block w-h-full">
      <input
        :value="modelValue"
        @input="updateValue"
        placeholder="输入标题"
        class="w-h-full"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";

// 定义 modelValue prop，默认值为空字符串
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

// 定义事件，将 input 组件的值通过 update:modelValue 暴露给父组件
const emit = defineEmits(["update:modelValue"]);

// 当 input 值发生改变时，触发 update:modelValue 事件
function updateValue(event: Event) {
  const target = event.target as HTMLInputElement;
  emit("update:modelValue", target.value);
}
</script>

<style lang="scss" scoped>
.input-block {
  height: 3rem;
  display: flex;
  padding: 0.2rem 1rem;
  border-radius: 4px;
  font-size: 1.1rem;

  input {
    outline: 0;
    border: 0;
    background-color: var(--bg-secondly);
    &::placeholder {
      color: var(--color-20);
      font-size: 1rem;
    }
  }
}
</style>
